import React from 'react'
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {Link, useNavigate} from 'react-router-dom'
import "./less/Login.less"
import logoImg from '../assets/logo.png'


export default function Login() {
  const navigate = useNavigate()

  const onFinish = (values) => {
   
    
  };

  return (
    <div className="login">
      <div className='login_box'>
        <img src={logoImg} alt="" />
        <Form
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: 'ユーザー名を入力してください！',
              },
            ]}
          >
            <Input size="large" prefix={<UserOutlined />} placeholder="ログインID（メールアドレス）" />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: 'パスワードを入力してください！',
              },
            ]}
          >
            <Input.Password size="large" prefix={<LockOutlined />} placeholder="パスワード" />
          </Form.Item>

          <Form.Item>
            <Button size='large' type="primary" htmlType="submit" block>ログイン</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
